<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="box" id="nav">
    1111
</div>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
</ul>

<script>

    const box = document.querySelector('div')
    console.log(box)
    const element = document.querySelector('.box');
    console.log(element)
    const element1 = document.querySelector('#nav');
    console.log(element1)

    const liList = document.querySelectorAll('ul li');
    liList.forEach(item => {
        console.log(item)
    })

</script>
</body>
</html>